<h1>Keycloak User</h1>

<ng-container *ngIf="userProfile">
    <h2>User information</h2>
    <table>
        <tr>
            <th scope="row">Username</th>
            <td>{{ userProfile?.username }}</td>
        </tr>
        <tr>
            <th scope="row">First name</th>
            <td>{{ userProfile?.firstName }}</td>
        </tr>
        <tr>
            <th scope="row">First name</th>
            <td>{{ userProfile?.lastName }}</td>
        </tr>
        <tr>
            <th scope="row">E-mail</th>
            <td>{{ userProfile?.email }}</td>
        </tr>
        <tr>
            <th scope="row">E-mail verified</th>
            <td>{{ userProfile?.emailVerified ? 'Yes' : 'No' }}</td>
        </tr>
    </table>
</ng-container>

<br />

<ng-container *ngIf="userProfile">
    <h2>User JSON</h2>
    {{userProfile | json}}
</ng-container>